<template>
	<!-- 我的-康复顾问-康复计划 -->
	<view class="content">
		<view class="bg"></view>
		<view class="search">
			<view style="width: 100%;">
				<uni-search-bar placeholder="搜索会员/康复师" bgColor="#FFFFFF" :radius="100" @confirm="search" v-model="searchValue" />
			</view>
		</view>
		<!-- 会员列表 -->
		<view style="z-index: 100;">
			<view v-for="(item,index) in data" class="item" style="justify-content: space-between;">
				<view class="content-top"><!-- @click="goDetail(item)"> -->
					<view class="name">{{item.memberName}}</view>
					<view class="phone">{{item.member.mobileTel}}</view>
				</view>
				<view style="margin-top: 30rpx; display: flex;justify-content: space-between;">
					<view class="type">康复周期</view>
					<view class="value">{{ formattedDate(item.startDate) }}-{{ formattedDate(item.endDate) }}</view>
				</view>
				<view style="margin-top: 18rpx; display: flex;justify-content: space-between;">
					<view class="type">康复师</view>
					<view class="value">{{item.recureTeacherName}}</view>
				</view>
				<view style="margin-top: 18rpx; display: flex;justify-content: space-between;">
					<view class="type">订单号</view>
					<view class="value">{{item.orderCode}}</view>
				</view>
				<view class="btn" @click="goDetail(item.id)">修改计划</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				searchValue: "",
				pageno: 1,
				pagesize: 10,
				pageCount: 0,
			}
		},
		mounted() {
			this.planPage();
		},
		methods: {
			reLoadFn() {
				//刷新数据逻辑
				this.data = [],
					this.planPage();
			},
			planPage() {
				let that = this;
				uni.request({
					url: "https://guokang365.mordo-care.com/api/recurePlan/searchPageAllOr",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: {
						"page": {
							"pageno": that.pageno,
							"pagesize": that.pagesize
						},
						"conditions": [{
							"name": "memberName",
							"operate": "like",
							"value": that.searchValue
						}, {
							"name": "recureTeacherName",
							"operate": "like",
							"value": that.searchValue
						}],
						"cascades": [{
							"column": "member",
						}],
					},
					success: (res) => {
						// todo 入参是or
						if (res.data.result != '100') {
							// 获取会员统计数据失败，不确定是否要弹窗
						} else {
							// todo 展示列表
							// that.data = res.data.list;
							that.data = that.data.concat(res.data.list);
							that.pageCount = res.data.list.length;
						}
					},
				});
			},
			search(res) {
				this.data = [];
				this.pageno = 1;
				this.pagesize = 10;
				this.pageCount = 0;
				this.planPage();
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/my/rehabilitation-plan-detail?id=" + id
				});
			},
			formattedDate(dateString) {
				const year = dateString.substr(0, 4);
				const month = dateString.substr(4, 2);
				const day = dateString.substr(6, 2);
				const date = new Date(year, month - 1, day); // 注意月份要减一
				const formattedDate = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`; // 格式化日期字符串
				return formattedDate;
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.data = [];
				this.pageno = 1;
				this.pagesize = 10;
				this.pageCount = 0;
				this.planPage();
				uni.stopPullDownRefresh()
			}, 500);
		},
		onReachBottom() {
			if (this.pageCount == this.pagesize) {
				this.pageno += 1;
				uni.showLoading({});
				setTimeout(() => {
					this.planPage();
					uni.hideLoading()
				}, 500);
			}
		},
		// methods: {
		// 	search(res) {
		// 		uni.showToast({
		// 			title: '搜索：' + res.value,
		// 			icon: 'none'
		// 		})
		// 	},
		// 	goDetail() {
		// 		uni.navigateTo({
		// 			url: "/pages/my/rehabilitation-plan-detail"
		// 			// url: "/pages/my/train-detail"
		// 		});
		// 	},
		// 	goDetail2() {
		// 		uni.navigateTo({
		// 			// url: "/pages/my/rehabilitation-plan-detail"
		// 			url: "/pages/my/train-detail"
		// 		});
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.search {
		width: 750rpx;
		height: 128rpx;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 22rpx 0 10rpx;
		box-sizing: border-box;
	}

	.bg {
		width: 750rpx;
		height: 128rpx;
		background: #CBFFDB;
		filter: blur(25px);
		position: absolute;
		z-index: 1;
		top: 0px;
	}

	.add-btn {
		width: 100rpx;
		height: 66rpx;
	}

	.item {
		background: #FFFFFF;
		border-radius: 22rpx;
		box-shadow: 0rpx 11rpx 14rpx 0rpx #E9F7ED;
		display: flex;
		width: 707rpx;
		box-sizing: border-box;
		padding: 32rpx;
		flex-direction: column;
		z-index: 1000;
		margin-bottom: 30rpx;

		.content-top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e5e5e5;
			padding-bottom: 30rpx;

			.name {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #48AF4E;
				line-height: 51rpx;
				text-align: left;
				// float: left;
			}

			.phone {
				height: 36rpx;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4b4b4b;
				line-height: 50rpx;
				// float: right;
				text-align: right;
				// margin-right: 10rpx;
			}
		}

		.type {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #464646;
			text-align: center;
			margin-top: 6rpx;
		}

		.value {
			font-size: 29rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #c6c6c6;
			text-align: center;
			margin-top: 6rpx;
		}

		.go-icon {
			width: 17rpx;
			height: 25rpx;
			margin-top: 10rpx;
		}

		.hysz-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}

		.btn {
			width: 200rpx;
			height: 60rpx;
			margin-top: 35rpx;
			margin-left: 450rpx;
			background: #FFFFFF;
			border-radius: 76px;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #4CB753;
			line-height: 58rpx;
			text-align: center;
			// float: right;
			border: 1px solid #4CB753;
		}
	}
</style>